<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订阅页</title>
    <link rel="stylesheet" href="css/subscription.css">
    <script type="text/javascript" src="../static/js/style.js"></script>
</head>

<body>
    <div class="b-container">
        <section id="cover"></section>
        <section class="b-top-bar">
            <i id="menu_open" class="fa-solid fa-ellipsis-vertical"></i>
            <h2>订阅</h2>
            <a href="./playlist.html"><i class="fa-solid fa-list"></i></a>

            <div id="menu_list" class="menu-left">
                <div class="user">
                    <div class="close-icon">
                        <i class="fa-solid fa-close"></i>
                    </div>
                    <div class="img">
                        <img src="../static/img/user_avater.png">
                    </div>
                    <h2 class="name">Benbinbin</h2>
                </div>
                <ul class="menu_list">
                    <a href="./subscription.html">
                        <li class="active">
                            <i class="fa-solid fa-cart-shopping"></i>
                            <span class="txt">订阅</span>
                        </li>
                    </a>
                    <a href="./explore.html">
                        <li>
                            <i class="fa-brands fa-wpexplorer"></i>
                            <span class="txt">探索</span>
                        </li>
                    </a>
                    <a href="./records.html">
                        <li>
                            <i class="fa-regular fa-rectangle-list"></i>
                            <span class="txt">记录</span>
                        </li>
                    </a>
                    <a href="./user.html">
                        <li>
                            <i class="fa-solid fa-gear"></i>
                            <span class="txt">设置</span>
                        </li>
                    </a>
                </ul>
            </div>
        </section>
        <section class="b-menu">
            <ul>
                <li>
                    <img src="../static/icon/sub_chart_data.svg">
                    <a href="#">Data</a>
                </li>
                <li>
                    <img src="../static/icon/sub_feather_cpu.svg">
                    <a href="#">Tech</a>
                </li>
                <li>
                    <img src="../static/icon/sub_science.svg">
                    <a href="#">Sicence</a>
                </li>
                <li>
                    <img src="../static/icon/sub_science.svg">
                    <a href="#">Finance</a>
                </li>
            </ul>
            <i class="me-more"></i>
        </section>

        <section class="b-cover-list">
            <div class="list">
                <div class="box">
                    <a href="#">
                        <img src="../static/img/sub_cover1.png" alt="">
                    </a>
                </div>
                <div class="box">
                    <a href="#">
                        <img src="../static/img/sub_cover2.png" alt="">
                    </a>
                </div>
                <div class="box">
                    <a href="#">
                        <img src="../static/img/sub_cover3.png" alt="">
                    </a>
                </div>
                <div class="box">
                    <a href="#">
                        <img src="../static/img/sub_cover4.png" alt="">
                    </a>
                </div>
            </div>
        </section>
        <section class="b-new-diversity">
            <div class="head">
                <h1>最新分集</h1>
                <i class="fa-solid fa-magnifying-glass"></i>
            </div>

            <div class="b-play-list">
                <div class="box">
                    <div class="inner-warrper">
                        <div class="top">
                            <img src="../static/img/sub_new_list_cover1.png" alt="">
                            <div>
                                <p class="title">Data Skeptic</p>
                                <p class="subtext">1 小时前</p>
                            </div>
                        </div>
                        <h2>Comp Engine</h2>
                        <p>Ben Fulcher, Senior Lecturer at the</p>
                        <div class="option-icon">
                            <a href="./play.html?bookname=Comp Engine&author=Data Skeptic&bookcover=../static/img/exp_cover1.png">
                                <div class="player-option">
                                    <i class="fa-solid fa-play"></i>
                                    136 分钟
                                </div>
                            </a>
                            <i class="me me-list"></i>
                            <a href="./download.html">
                                <i class="me me-download"></i>
                            </a>
                            <i class="me me-star"></i>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="inner-warrper">
                        <div class="top">
                            <img src="../static/img/sub_new_list_cover2.png" alt="">
                            <div>
                                <p class="title">下一本讀什麼？</p>
                                <p class="subtext">14 小时前</p>
                            </div>
                        </div>
                        <h2>EP.88 《讓寫作成為自我精進的武器》</h2>
                        <p>你知道現在職場上最關鍵的隱藏技能是什麼嗎？你知道可以不說一句話就讓合作</p>
                        <div class="option-icon">
                            <a href="./play.html?bookname=下一本讀什麼%3F&author=瓦基&bookcover=../static/img/exp_cover2.png">
                                <div class="player-option">
                                    <i class="fa-solid fa-play"></i>
                                    35 分钟
                                </div>
                            </a>
                            <i class="me me-list"></i>
                            <a href="./download.html">
                                <i class="me me-download"></i>
                            </a>
                            <i class="me me-star"></i>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <div class="inner-warrper">
                        <div class="top">
                            <img src="../static/img/sub_new_list_cover2.png" alt="">
                            <div>
                                <p class="title">下一本讀什麼？</p>
                                <p class="subtext">14 小时前</p>
                            </div>
                        </div>
                        <h2>EP.88 《讓寫作成為自我精進的武器》</h2>
                        <p>你知道現在職場上最關鍵的隱藏技能是什麼嗎？你知道可以不說一句話就讓合作</p>
                        <div class="option-icon">
                            <a href="./play.html?bookname=下一本讀什麼%3F&author=瓦基&bookcover=../static/img/exp_cover2.png">
                                <div class="player-option">
                                    <i class="fa-solid fa-play"></i>
                                    35 分钟
                                </div>
                            </a>
                            <i class="me me-list"></i>
                            <a href="./download.html">
                                <i class="me me-download"></i>
                            </a>
                            <i class="me me-star"></i>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="b-player-play">
            <div class="play-view">
                <span class="prefix">Hidden Brain - </span>
                <span class="suffix">You 2.0: Did That Re</span>
            </div>
            <div id="me_progess_line" class="me-progess active" style="--height: 2">
                <div class="b-progess-cache"></div>
                <div style="width: 50%;" class="b-progess-sloid"></div>
            </div>
            <div class="player-view">
                <div class="img-cover">
                    <a
                        href="./play.html?bookname=Comp Engine&author=Data Skeptic&bookcover=../static/img/exp_cover1.png">
                        <img src="../static/img/sub_play_cover.png">
                    </a>
                </div>
                <div class="middle-option">
                    <i class="fa-solid fa-rotate-left"></i>
                    <div class="play">
                        <i class="fa-solid fa-play"></i>
                    </div>
                    <i class="fa-solid fa-rotate-right"></i>
                </div>
                <div class="right-search">
                </div>
            </div>
        </section>

        <script src="../static/js/player.js"></script>
        <script src="../static/js/main-menu.js"></script>
    </div>
</body>

</html>